<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
    <title>秒杀列表</title>
    <script th:src="@{/js/jquery-3.6.0.js}"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" th:href="@{/css/page.css}">
<!--    <script th:src="@{/js/laydate/laydate.js}"></script>-->
    <script th:src="@{/js/layer/layer.js}"></script>
    <script th:src="@{/js/template.js}"></script>
    <script>
        $(()=>{
            $("#search-btn").on("click",function (){
                let val = $("#search_name").val();
                console.log(val);
                //跳转到指定页面并查询结果渲染
                if(val==null||val==""){
                    window.location.href="http://localhost:8081/page/courseSeckill/showList";
                }else{
                    window.location.href="http://localhost:8081/page/courseSeckill/getByName/"+val;
                }
            });
            // function clickCheck(startTime){
            //     let start = new Date(startTime);
            //     let startTag = start.getTime();
            //     let now = new Date().getTime();
            //     let  disTime = Math.abs( now-startTag);
            //     if(disTime<0){
            //         this.event.preventDefault();
            //     }
            // }
            // function showTime(startTime,endTime){
            //     let  tagDate = new Date(endTime);
            //     // 获取目标跟 1970.1.1 的时间差
            //     let  tagGetTime = tagDate.getTime();
            //     let timeGoFun = ()=>{
            //         let  now = new Date(startTime);
            //         // 获取时间差，单位“毫秒”
            //         let  disTime = Math.abs( tagGetTime-now.getTime());
            //
            //         // 判断是否时间到了指定点
            //         // 是，就终止计时器，终结函数运行。
            //         if( disTime===0 ){
            //             showTime.innerHTML = "时间到~！";
            //             clearInterval(myset);
            //             return false;
            //         }
            //         disTime = Math.floor( disTime/1000 );  // 把毫秒，转为秒
            //         let miao =  disTime % 60 ;  // 秒
            //         let fen = Math.floor( disTime / 60 % 60 );  // 分
            //         let xiaoshi = Math.floor( disTime / 60 / 60  ) % 24;  // 小时
            //         let tian = Math.floor( disTime / 60 / 60 / 24 );  // 天
            //
            //         // 显示时间。利用了 ES6 的模版字符串，好处是可以存放变量。
            //         document.getElementsByClassName("showTime").innerHTML = `${tian}天${xiaoshi}时${fen}分${miao}秒`;
            //     };
            //
            //
            //     // 启动计时器，让时间走动起来。
            //     let myset =  setInterval(()=>{
            //         timeGoFun();
            //     },1000);
            // }
        });
    </script>
</head>
<body>
    <div>
        <input type="text" placeholder="请输入需要搜索的名" id="search_name"><input type="button" id="search-btn" value="点击搜索"/>
    </div>
    <div class="float_clear">
            <div class="col-4"  th:each="item : ${data}">
                <button type="button" th:text="'开始'+${item.startTime}" disabled class="time_show"></button>
                <button type="button" th:text="'结束'+${item.endTime}" disabled class="time_show" ></button><br/>
<!--                <div th:onload="|javascript:showTime(${item.startTime},${item.endTime})|" class="showTime"></div>-->
                <div style="margin-top: 5px;" align="center">
                    <img src="https://file02.16sucai.com/d/file/2014/0827/c0c92bd51bb72e6d12d5b877dce338e8.jpg" width="270px"/>
                </div>
                <p>
                    秒杀名：<span th:utext="${item.name}"></span>
                </p>
                <p>
                    秒杀价：<span th:text="${item.seckillPrice}"></span>
                </p>
                <p>
                    优惠价格：<span th:text="${item.favorablePrice}"></span>
                </p>
                <p>
                    秒杀数量：<span th:text="${item.seckillNum}"></span>
                </p>
                <br/>

<!--                <a th:if="${item.seckillNum>0}"  th:if="${!item.timeCom}">-->
<!--                    <input type="button" value="立即秒杀"/>-->
<!--                </a>-->
                <a th:href="|/page/courseSeckill/item/${item.id}|" th:if="${item.seckillNum>0}">
                    <input type="button" value="立即秒杀"/>
                </a>
                                    <!--        修改页面跳转地址-->
<!--                <div th:switch="|javascript:clickCheck(${item.startTime})|">-->
<!--                    <a th:href="|/page/courseSeckill/item/${item.id}|" th:case="'1'">-->
<!--                        <input type="button" value="立即秒杀"/>-->
<!--                    </a>-->
<!--                    <a th:case="'0'">-->
<!--                        <input type="button" value="立即秒杀"/>-->
<!--                    </a>-->
<!--                </div>-->
                <a th:if="${item.seckillNum<=0}">
                    <input type="button" value="立即秒杀" disabled style="background-color: #666666"/>
                </a>
            </div>
    </div>
<!--    <p th:each="item : ${data}" class="prefix_clear">-->
<!--        <span th:text="${item.name}"></span>-->
<!--        <span th:text="${item.startTime}"></span>-->
<!--        <span th:text="${item.endTime}"></span>-->
<!--    </p>-->
</body>
</html>